<template>
<div class="main">
	<div class="contents">
	 
		<!-- <p>{{ $route.params.id }}</p> -->
		 <ul class="head">
			<li>全部课程<span>></span></li>
			<li v-for="(item,i) in namearr" :key="i">{{item}}</li>
		</ul>
		<div class="headdiv">
		<span>学习方向</span>
			<ul class="head2">
			<li v-for="(item,idx) in nameData" :key="idx" @click="searchdetail(item)">{{item}}</li>
		</ul>
		</div>
	
		<div class="head3" >
			<span>全部</span>
			<span>免费课</span>
			<span>付费课</span> |
			<input type="checkbox">录播
			<input type="checkbox">直播
			<input type="checkbox">有回放
			<input type="checkbox">可试听 |
			<input type="checkbox">认证课程 |
			<input type="checkbox">正在直播
		</div>
		<ul class="head4">
			<li>综合排序</li>
			<li>好评率</li>
			<li>人气</li>
			<li>价格</li> |
			<li>价格区间</li>
		</ul>
		<div class="list">
			<ComPart 
					v-for="(item,idx) in listarr" 
					:key="idx"
					>
					<template v-slot:p_img>
						<img 
						:src="item.img" 
						alt=""
						@click="click(
							item.id,
							item.name,
							item.img,
						item.number,
						item.platform
						)"
						>
					</template>

					<template v-slot:p_tit> 
						{{item.name}}
					</template>

					<template v-slot:p_sche>
						{{item.class}}
					</template>

					<template v-slot:p_source>
						{{item.platform}}
					</template>

					<template v-slot:p_gold>
						<!-- <a href="" class="p_gold"></a> -->

					</template>

					<template v-slot:p_pri>
						{{item.price}}
					</template>
						<template v-slot:p_peo>
						{{item.number}}
					</template>
					</ComPart>
				</div>


				<el-pagination
			 	 background
 				 layout="prev, pager, next"
 				 :total="count"
				 :page-size="20"
				 @current-change="changePage"
				 >
				</el-pagination>


		<!-- <div class="cloumns">
		<columns></columns>
		</div> -->
		

	 <div class="bottom">
		<h2>猜你喜欢</h2>
		<div>
					<!-- <list v-for="item in 6"></list> -->
					<ComPart v-for="(item,idx) in bottomarr" :key="idx">
					<template v-slot:p_img>
						<img :src="item.img" alt="">
					</template>

					<template v-slot:p_tit> 
						{{item.name}}
					</template>

					<template v-slot:p_sche>
						{{item.class}}
					</template>

					<template v-slot:p_source>
						{{item.platform}}
					</template>

					<template v-slot:p_gold>
						<a href="" class="p_gold"></a>

					</template>

					<template v-slot:p_pri>
						{{item.price}}
					</template>
						<template v-slot:p_peo>
						{{item.number}}
					</template>
					</ComPart>
				</div>
	</div>
	  	<div class="bottom2">
			<span v-for="(item,idx) in titleData" :key="idx"
			@click="one(idx)"
			:class="{ active: num == idx}"
			>{{item.name}}</span>
			<ul class="onelist">
				<li v-for="(item) in tomenulist" 
				>{{item.name}}</li>
			</ul>
		</div>

	</div> 
<!-- ********************侧边***************************** -->
		 <div class="side">
				<h2>热门推荐</h2>
				<div>
					<!-- <list v-for="item in 6"></list> -->
					<ComPart v-for="(item,idx) in sidearr" :key="idx" style="margin-left:0px ;">
					<template v-slot:p_img>
						<img :src="item.img" alt="">
					</template>

					<template v-slot:p_tit> 
						{{item.name}}
					</template>

					<template v-slot:p_sche>
						{{item.class}}
					</template>

					<template v-slot:p_source>
						{{item.platform}}
					</template>

					<template v-slot:p_gold>
						<a href="" class="p_gold"></a>

					</template>

					<template v-slot:p_pri>
						{{item.price}}
					</template>
						<template v-slot:p_peo>
						{{item.number}}
					</template>
					</ComPart>
				</div>
				
	 </div>
	</div>
	

	

</template>
<script>
// import {indextitle} from '@/api'
import {getlistData} from '@/api'
import list from '@/components/list.vue'
import ComPart from '@/components/ComPart.vue'
// import columns from '@/components/columns.vue'
import { titleData } from '@/api'
	export default{
		name:"index",
		data(){
			return {
				titleData:[],
				tomenulist:[],
				num:0,
				sidearr:[],
				bottomarr:[],
				listarr:[],
				count:0,
				arr:[],
				a:[],
				nameData:["全部","前沿技术","互联网运营","Java开发","互联网产品","后台开发","Python","前端开发","移动开发","大数据与AI","软件测试","运维","游戏开发","认证考试","计算机通识课","硬件开发"],
				classify:["IT·互联网","设计·创作","考试·考证","电商·营销","职业·职场","兴趣	生活","语言·留学","企业·培训"],
				id:"",
				namearr:[],
				reg:""
			
			}
		}
		,
		created(){
			this.id = this.$route.params.id
			this.namearr = this.classify[this.id-1]

			// console.log(this.id)
			titleData().then(res=>{
				this.titleData = res.data.data.slice(0,2)
				this.tomenulist = this.titleData[0].children
				// console.log(this.tomenulist)
			}),
			getlistData().then(res=>{
				this.arr = res.data.data
				// console.log(this.arr)
				
				var num=0;
				this.count = res.data.data.length-11
				// console.log(this.count)
				for(let i=0;i<8;i++){
					this.a.push(this.arr.slice(num,num+20))
					num=num+20;
				}
				this.listarr = this.a[0]
				 this.sidearr = res.data.data.slice(20,26)
				this.bottomarr = res.data.data.slice(30,35)
			})
		},
		beforeRouteUpdate(to,from,next){
			this.id = to.params.id
			// this.classify[1] = this.id
			// console.log(this.id)
			this.namearr = this.classify[this.id-1]

			getlistData().then(res=>{
				this.arr = res.data.data
				// console.log(this.arr)
				
				var num=0;
				this.count = res.data.data.length-11
				// console.log(this.count)
				for(let i=0;i<8;i++){
					this.a.push(this.arr.slice(num,num+20))
					num=num+20;
				}
				this.listarr = this.a[0]
				 this.sidearr = res.data.data.slice(20,26)
				this.bottomarr = res.data.data.slice(30,35)
			})
			next()
			
		}
		,
		components:{
			list,
			// columns,
			titleData,
			ComPart
			
		},
		methods:{
			one(i){
				this.num=i
				this.tomenulist = this.titleData[i].children
				// console.log(this.tomenulist)
				

			},
			changePage(i){
				getlistData(i).then(res=>{
				this.listarr = this.a[i-1]
				// console.log(i)
				})
			},
			searchdetail(item){
			if(!(item == "全部")){
					var arr2 = item.slice(0,1)
				// console.log(item)
				const k = new RegExp(arr2)
				console.log(k)
				var abc = []
				// console.log(k.test(abc))
				this.arr.forEach((it) => {
					if(k.test(it.name)){
						abc.push(it)
					}
				});
				var num=0
				var b=[]
				this.count = abc.length
				console.log(this.count)
				for(let i=0;i<8;i++){
					b.push(abc.slice(num,num+20))
					num=num+20;
				}
				this.listarr = b[0]
				

				// console.log(this.listarr,11)
			}else{
				var num=0
				var b=[]
				// this.listarr.length = res.data.data.length-11

				this.count = this.arr.length-11
				// console.log(this.count)
				for(let i=0;i<4;i++){
					b.push(this.arr.slice(num,num+20))
					num=num+20;
				}
				this.listarr = b[0]
				console.log(this.listarr,11)	
			}
			
			},
			click(id,name,img,number,platform){
				this.$router.push({
					path:`/coll/${id}`,
					query:{
						Name:name,
						Img:img,
						number:number,
						platform:platform
					}
				})
				// @click="click(item.id,item.name,item.img,
				// 		item.class,item.number,item.platform)"
				// 		>
			}
		}
		
	}
</script>

<style lang="less" scoped>
		
				.active{
   			color: #23b8ff;
   			 
}	
		.main{
			overflow: hidden;
			padding: 0;
			margin: 0 auto;
			width: 1200px;
			// height: 800px;
			// background-color:gray ;
			.el-pagination{text-align: center;
			.btn-prev{width: 80px;}
			}
		.contents{
			float: left;
			width: 950px;
			// background-color: aqua;

			
				.head {
					width: 950px;
				background-color: #fff;
				height: 84px;
				line-height: 84px;
				border-bottom: 1px solid gray;
				li{display:inline-block;}
					span{margin: 0 10px;}
			}
				#sp1{width: 64px;
				background-color: aquamarine;}

				.headdiv{
					margin: 0;
					padding: 0;
					width: 950px;
					border-bottom: 1px solid gray;
					display: flex;
					span{color: gray;
					line-height: 50px;}
				.head2 {
					margin-left: 34px;
					background-color: #fff;
					float: right;
					height: 100px;
					line-height: 50px;
					
					width: 850px;
					li{display:inline;margin: 0 15px;cursor: pointer;}
					li:hover{color:rgb(56, 21, 231) ;}
					li:first-child{
						color: #23b8ff;
					}

			}
				}
			
				.head3 {
				margin-top: 10px;
				width: 950px;
				background-color: rgb(221, 219, 219);
				height: 60px;
				line-height: 60px;
				border-bottom: 1px solid gray;
				span{margin: 0 10px;display: inline; width: 30px;cursor: pointer;}
				span:hover{color: rgb(56, 21, 231);}
				span:first-child{background-color: rgb(5, 98, 237);color: white;width: 50px;display: inline-block;height: 40px;line-height: 40px;text-align: center;}
				input{width:20px;cursor: pointer;}
			}
				.head4 {
					width: 950px;
				background-color: #fff;
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid gray;
				li{display:inline;margin: 0 16px;
				cursor: pointer;}
				li:hover{color:rgb(56, 21, 231) ;}
			}
				.list{width: 950px;
					height: 1215px;
					// display: flex;
   				 	// flex-wrap: wrap;
					cursor: pointer;
					// margin-left: 0px;
					.part{
							
					float: left;
					}
					
					
				}
				.cloumns{
					margin-top: 40px;
				
					


				}
				
			
		}
		// ***********侧边*****************************
		.side{
			width: 250px;
			float: right;
			// background-color: #23b8ff;

			h2{
   			 font-size: 16px;
   			 height: 36px;
   			 line-height: 32px;
  			  border-bottom: 1px solid #dfdee0;
   			 margin: 0 10px;
			}
			div{
				margin: 0 auto;
				// margin-right: 50px;
				width: 220px;
				// background-color: aqua;
			}
		}
		// ****************底部*********************************
		.bottom{
			cursor: pointer;
			margin-top: 80px;
			width: 1200px;
			// ul{	display: flex;
   			// 	 	flex-wrap: wrap;
			// 	width: 1200px;
			// 	li{
			// 		width: 220px;
			// 	}
			// }
			div{
				
				display: flex;
   				 	flex-wrap: wrap;
			}
		}
		.bottom2{
	
			margin-top: 50px;

			span{
				
				display: inline;
				width: 150px;
				height: 40px;
				font-size: 30px;
				margin:  0 30px;
				cursor: pointer;
				border-bottom: #f7f8f9 5px solid;
			}
	
			ul{
					margin-top: 15px;
					width: 1200px;
					height: 100px;
					li{
						display: inline-block;
						border: 1px solid gray;
						padding: 10px;
						margin: 20px;
						border-radius: 25px;
											}
				}
		}
	}
</style>
